<style type='text/css'>
th,td {
	text-align:left
}
.page-header{padding-bottom:0;margin:0}
.fui-cellone{padding:0}
.c{text-align:center}
.ibox-content{padding:0}
</style>
<div class="col-jy" style="width:100%">
    <div class="col-jy-3" style='border-right: 1px solid #ddd;padding-right:20px'>
        <div class="panel" style="background:#f2f2f2">
              <div class="panel-body">
                   <div class="panel-title">
                        <span class="label label-black pull-right" style="background-color:#666;color:#fff">实时</span>
                        <h4>本月销售额</h4>
                   </div>
                   <div class="panel-content">
						 <div class="row">
							 <div class="col-md-10">
								 <h1 class="syscolor">
									{{pagedata.data.monthfee || '0.00'}}元
								 </h1>
							 </div>
						 </div>
                   </div>
              </div>
         </div>
		 <div class="panel" style="background:#f2f2f2">
              <div class="panel-body">
                   <div class="panel-title">
                        <span class="label label-black pull-right" style="background-color:#666;color:#fff">实时</span>
                        <h4>本月订单数</h4>
                   </div>
                   <div class="panel-content">
						 <div class="row">
							 <div class="col-md-10">
								 <h1 class="syscolor">
									{{pagedata.data.monthorder || '0'}}单
								 </h1>
							 </div>
						 </div>
                   </div>
              </div>
         </div>
		 <div class="panel" style="background:#f2f2f2">
              <div class="panel-body">
                   <div class="panel-title">
                        <span class="label label-black pull-right" style="background-color:#666;color:#fff">实时</span>
                        <h4>年度累计销售额</h4>
                   </div>
                   <div class="panel-content">
						 <div class="row">
							 <div class="col-md-10">
								 <h1 class="syscolor">
									{{pagedata.data.yearfee || '0.00'}}元
								 </h1>
							 </div>
						 </div>
                   </div>
              </div>
         </div>
		  <div class="panel" style="background:#f2f2f2">
              <div class="panel-body">
                   <div class="panel-title">
                        <span class="label label-black pull-right" style="background-color:#666;color:#fff">实时</span>
                        <h4>年度累计订单数量</h4>
                   </div>
                   <div class="panel-content">
						 <div class="row">
							 <div class="col-md-10">
								 <h1 class="syscolor">
									{{pagedata.data.yearnums || '0'}}单
								 </h1>
							 </div>
						 </div>
                   </div>
              </div>
         </div>
		 <div class="panel" style="background:#f2f2f2">
              <div class="panel-body">
                   <div class="panel-title">
                        <span class="label label-black pull-right" style="background-color:#666;color:#fff">实时</span>
                        <h4>年度累计下单客户数</h4>
                   </div>
                   <div class="panel-content">
						 <div class="row">
							 <div class="col-md-10">
								 <h1 class="syscolor">
									{{pagedata.data.yearmembers || '0'}}人
								 </h1>
							 </div>
						 </div>
                   </div>
              </div>
         </div>
	</div>
	<div class="col-jy-9" style='padding-right:20px'>
		<div class="fui-cellone">
		 <div class="fui-cellone-info"><h3 class="bold c">运营数据看板 / 业绩报表</h3></div>
		</div>
		<div class="col-jy" style="width:100%">
		<div class="col-jy-6">
				<div class="ibox float-e-margins">
					<div class="ibox-content" style="padding-left:15px">
						<div class="echarts" id="echarts-chart-01" style="height: 280px;display: none;"></div>
						<div class="spiner-example" id="echarts-loading-01">
								<div class="sk-spinner sk-spinner-three-bounce">
									<div class="sk-bounce1"></div>
									<div class="sk-bounce2"></div>
									<div class="sk-bounce3"></div>
								</div>
						</div>
					</div>
				</div>
				<div class="ibox float-e-margins">
					<div class="ibox-content" style="padding-left:15px">
						<div class="echarts" id="echarts-chart-02" style="height: 280px;display: none;"></div>
						<div class="spiner-example" id="echarts-loading-02">
								<div class="sk-spinner sk-spinner-three-bounce">
									<div class="sk-bounce1"></div>
									<div class="sk-bounce2"></div>
									<div class="sk-bounce3"></div>
								</div>
						</div>
					</div>
				</div>
				<div class="ibox float-e-margins">
					<div class="ibox-content" style="padding-left:15px">
						<div class="echarts" id="echarts-chart-03" style="height: 280px;display: none;"></div>
						<div class="spiner-example" id="echarts-loading-03">
								<div class="sk-spinner sk-spinner-three-bounce">
									<div class="sk-bounce1"></div>
									<div class="sk-bounce2"></div>
									<div class="sk-bounce3"></div>
								</div>
						</div>
					</div>
				</div>
		</div>
		<div class="col-jy-6">
				<div class="ibox float-e-margins">
					<div class="ibox-content" style="padding-left:15px">
						<div class="echarts" id="echarts-chart-04" style="height: 840px;display: none;"></div>
						<div class="spiner-example" id="echarts-loading-04">
								<div class="sk-spinner sk-spinner-three-bounce">
									<div class="sk-bounce1"></div>
									<div class="sk-bounce2"></div>
									<div class="sk-bounce3"></div>
								</div>
						</div>
					</div>
				</div>
		</div>
		</div>
	</div>
</div>
<script language='javascript'>
setTimeout(function(){
 var res = scope.pagedata.data01;
	if(res){
		   $("#echarts-loading-01").hide()
		   $("#echarts-chart-01").show();
			pie_chart_01(res);
	   }
} ,300);
function pie_chart_01(res){
	require(['echarts'],function (echarts) {
	var myChart = echarts.init(document.getElementById("echarts-chart-01"));
	var legend=[];
	$.each(res.datas,function(k,v){
		legend.push(v.name);
	});
	var series=[];
	$.each(res.datas,function(k,v){
		series.push({
				name: v.name,
				type: "line",
				data: v.value,
				smooth:true,
				symbolSize:2,
				itemStyle: {normal: {areaStyle: {type: 'default'}}},
		});
	});
	var option = {
			title : {
				text: scope.check_show_lang('7日销量走势图'),
			},
			tooltip : {
				trigger: 'axis',
				position: function (point) {
                            return [point[0], '10%'];
                        },
                        axisPointer: {
                            type: 'line'
                        }
			},
			legend: {
				data:legend
			},
			toolbox: {
				show : true,
				feature : {
					mark : {show: true},
					dataView : {show: true, readOnly: false},
					magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
					restore : {show: true},
					saveAsImage : {show: true}
				}
			},
			calculable : true,
			xAxis : [
				{
					type : 'category',
					boundaryGap : false,
					data : res.xdatas
				}
			],
			yAxis : [
				{
					type : 'value'
				}
			],
			series : series,
		};
		myChart.setOption(option);
		window.onresize = myChart.resize;
	});
}
</script>
<script language='javascript'>
setTimeout(function(){
 var res = scope.pagedata.data02;
	if(res){
		   $("#echarts-loading-02").hide()
		   $("#echarts-chart-02").show();
			pie_chart_02(res);
	   }
} ,300);
function pie_chart_02(res){
	require(['echarts'],function (echarts) {
	var myChart = echarts.init(document.getElementById("echarts-chart-02"));
	option = {
	  title: {
		 text: scope.check_show_lang('本月运营数据')
	  },
	  xAxis: {
		max: 'dataMax'
	  },
	  yAxis: {
		type: 'category',
		inverse: true,
		data: res.names
	  },
	  series: [
		{
		  data: res.values,
		  type: 'bar',
		  itemStyle: {normal: {label: {show:true,position: 'right'}}},
		}
	  ]
	};
		myChart.setOption(option);
		window.onresize = myChart.resize;
	});
}
</script>
<script language='javascript'>
setTimeout(function(){
 var res = scope.pagedata.data03;
	if(res){
		   $("#echarts-loading-03").hide()
		   $("#echarts-chart-03").show();
			pie_chart_03(res);
	   }
} ,300);
function pie_chart_03(res){
	require(['echarts'],function (echarts) {
	var myChart = echarts.init(document.getElementById("echarts-chart-03"));
	option = {
	  title: {
		 text: scope.check_show_lang('本月商品TOP5')
	  },
	  xAxis: {
		type: 'category',
		data: res.names
	  },
	  yAxis: {
		type: 'value'
	  },
	  series: [
		{
		  data: res.values,
		  type: 'bar'
		}
	  ]
	};
		myChart.setOption(option);
		window.onresize = myChart.resize;
	});
}
</script>
<script language='javascript'>
setTimeout(function(){
 var res = scope.pagedata.data04;
	if(res){
		   $("#echarts-loading-04").hide()
		   $("#echarts-chart-04").show();
			pie_chart_04(res);
	   }
} ,300);
function pie_chart_04(res){
	require(['echarts'],function (echarts) {
	var myChart = echarts.init(document.getElementById("echarts-chart-04"));
	option = {
	  title: {
		 text: scope.check_show_lang('本月各等级成交客户数/订单数')
	  },
	  legend: {
          show: true,
          right: '5%',
       },
	  xAxis: {
		max: 'dataMax'
	  },
	  yAxis: {
		type: 'category',
		inverse: true,
		data: res.names
	  },
	  series: [
		{
		  name: '订单数',
		  data: res.values1,
		  type: 'bar',
		  itemStyle: {normal: {label: {show:true,position: 'right'}}},
		},
		{
		  name: '成交客户数',
		  data: res.values2,
		  type: 'bar',
		  itemStyle: {normal: {label: {show:true,position: 'right'}}},
		}
	  ]
	};
		myChart.setOption(option);
		window.onresize = myChart.resize;
	});
}
</script>